/**
月投资进度
20230320 新增
*/

<template>
  <div class="meterage-manage">
    <div class="model-title-css">
      <div>月投资进度</div>
    </div>
    <div class="background_wrap">
      <div class="operate_wrap flex">
        <div class="flex-right">
          <el-date-picker v-model="search.year" type="year" size="small" :clearable="false" @change="getList()" value-format="yyyy" placeholder="选择年">
          </el-date-picker>

          <el-button style="margin-left: 15px" type="primary" size="small" class="add buildButtonStyle" @click="writeReport" v-permission="permission.add"><i class="iconfont icon-icon_add"></i> 新增
          </el-button>
        </div>

      </div>

      <!--======================================================================================================-->
      <!--·列表-->
      <!--======================================================================================================-->
      <div class="list_wrap">
        <div class="left-list WholeScroll">
          <div class="text-class" v-for="(item, index) in leftList" :key="index" :class="{ 'activecss-left': index == leftListIndex }" @click="onChangeM(item,index)">
            {{item.name}}
          </div>
        </div>
        <div class="scroll-table-array WholeScroll">
          <el-table class="project-management-info1" :border="true" :row-class-name="tableRowStyleName" :cell-class-name="tableCellStyleName" :header-cell-class-name="tableHeaderCellStyleName" :stripe="true" ref="multipleTable" :data="listOne" :height="tableHeight" @cell-click="cellClick" tooltip-effect="dark" style="
              width: 100%;
              font-family: PingFangSC-Regular;
              font-size: 14px;
            ">

            <el-table-column show-overflow-tooltip label="序号" width="60">
              <template slot-scope="scope">
                <div style="text-align: center;">{{ scope.$index+1 }}</div>
              </template>
            </el-table-column>

            <el-table-column show-overflow-tooltip label="项目名称" min-width="150" prop="projectName">
            </el-table-column>
            <el-table-column show-overflow-tooltip label="目前进度" prop="currentDescription" min-width="300">
            </el-table-column>
            <el-table-column show-overflow-tooltip label="实际完成产值（万元）" prop="monthActualFinishValue" min-width="180">
              <template slot-scope="scope">
                <div style="text-align: right;">{{scope.row.monthActualFinishValue }}</div>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="累计完成进度" prop="accumulatedFinish" min-width="150">
              <template slot-scope='scope'>
                <div style="text-align: right;"> {{ scope.row.accumulatedFinish?(scope.row.accumulatedFinish+'%'):'' }}</div>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="累计支付比例" prop="accumulatedPayRate" min-width="150">
              <template slot-scope='scope'>
                <div style="text-align: right;">{{scope.row.accumulatedPayRate?(scope.row.accumulatedPayRate+"%"):""}}</div>
              </template>
            </el-table-column>

            <el-table-column show-overflow-tooltip label="操作" width="250">
              <template slot-scope="scope">
                <el-button size="mini" class="menu_icon iconfont icon-icon_look action_color1" v-permission="permission.show" @click="handleClickDeal({type:'show',name:'查看',detailId:scope.row.id})">&nbsp;查看</el-button>
                <el-button size="mini" class="menu_icon iconfont icon-xiugai-copy action_color1" v-permission="permission.edit" @click="handleClickDeal({type:'update',name:'修改',detailId:scope.row.id})">&nbsp;修改</el-button>
                <el-button size="mini" class="menu_icon iconfont icon-shanchu action_color2" v-permission="permission.del" @click="handleClickDeal({type:'delete',name:'删除',detailId:scope.row.id})">&nbsp;删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog width="600px" class="approveDialog" :visible.sync="showFileDialog" :modal-append-to-body="false" :close-on-click-modal="false" append-to-body>
      <span slot="title">
        <i class="iconfont icon-a-wenjian1"></i>
        <span>附件</span>
      </span>
      <el-table :border="true" :header-cell-style="{padding: '0',height:'38px',backgroundColor: '#f2f2f2',textAlign:'center',borderColor: '#d4d4d4'}" :cell-style="{padding: '6px 0',textAlign:'center',borderColor: '#d4d4d4'}" ref="multipleTable" :data="nowFileList" style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px;">
        <el-table-column show-overflow-tooltip label="序号" type="index" width="60">

        </el-table-column>
        <el-table-column show-overflow-tooltip label="文件名" style="text-align: center" width="320">
          <template slot-scope="scope">
            <div style="text-align: center;" v-html="scope.row.fileName"></div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip min-width="20%" label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="light" content="查看" placement="top">
              <div class="menu_icon" @click="viewFile(scope.row.id)" style="display: inline;cursor:pointer;margin-right: 5px"><i class='iconfont icon-icon_look'></i></div>
            </el-tooltip>
            <el-tooltip class="item" effect="light" content="下载" placement="top">
              <div class="menu_icon" @click="dlFile(scope.row)" style="display: inline;cursor:pointer"><i class='iconfont icon-icon-xiazai'></i></div>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <!--新建和编辑的暂存上报-->
        <el-button size="small" @click="showFileDialog=false"><i class="iconfont icon-icon_cancel"></i> 关 闭
        </el-button>
      </div>
    </el-dialog>

    <Detail :postDetail="postDetailData" @reloadList="getList(true)"></Detail>
  </div>
</template>

<script>
import {
  tableRowStyleGol,
  tableCellStyleGol,
  tableHeaderCellStyleGol,
} from '@/utils/publicFun'
import file from '@/api/file'
import { Base64 } from 'js-base64'
import projectSectionInfo from '@/api/buss/common'
import msgUtil from '@/utils/msgUtil'
import LoadingButton from '@/components/LoadingButton';
import WorkFlowBtn from '@/components/WorkFlow/table/index.vue'
import progressMonthly from '@/api/buss/progressmonthly'
export default {
  name: `monthInvestProgressGroup`,
  components: {
    WorkFlowBtn,
    Detail: require('./monthInvestProgress-detail').default,
  },
  data() {
    return {
      processDialog: false,
      chooseMonth: '1月',
      permission: {
        add: ['100', '1009147:add'],
        edit: ['100', '1009147:edit'],
        del: ['100', '1009147:del'],
        show: ['100', '1009147:show'],
      },

      newRowName: '',
      tabClickIndex: '',
      tabClickLabel: '',
      addsdId: '', //隧道的id
      //constructionUnitOptions:[], // 公司
      projectOptions: [], // 项目
      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,
      tablePaginationPrev: '上一页',
      tablePaginationNext: '下一页',
      year: '2023',
      showYearState: false,
      addRowDialog: false,

      hasAdd: false,


      nowLeftId: `${(new Date()).getMonth() + 1}`,
      leftListIndex: (new Date()).getMonth(),
      listOne: [{}],
      inputValue: '',
      imageProgressInfoListCopy: [],

      fileTitle: '文件',
      nowFileList: [],
      showFileDialog: false,
      leftList: [
        { id: "1", name: "1月" },
        { id: "2", name: "2月" },
        { id: "3", name: "3月" },
        { id: "4", name: "4月" },
        { id: "5", name: "5月" },
        { id: "6", name: "6月" },
        { id: "7", name: "7月" },
        { id: "8", name: "8月" },
        { id: "9", name: "9月" },
        { id: "10", name: "10月" },
        { id: "11", name: "11月" },
        { id: "12", name: "12月" },
      ],

      // 搜索参数
      search: {
        searchName: '',
        pageIndex: 0,
        pageSize: 15,
        pageSum: 0,
        year: '2023',
        month: '1',


      },

      formData: {
        id: '',
        monthLabel: '',
        weekDataId: '',
        weekLabel: '',
        startDateLabel: '',
        endDateLabel: '',
      },
      projectTree: [],
      weekOption: [
        // {
        //   id: '1',
        //   name: '第一周'
        // }
      ],
      // 列类型表
      list: [],

      // 向详情子组件的传值
      postDetailData: {
        show: false,
        type: 'build',
        typeNmae: '新增',
      },
      // 向详情子组件的传值
      postDetailData2: {
        show: false,
        type: 'build',
        typeNmae: '新增',
      },
      /**
       * 流程提交数据
       * */
      reportData: {
        //  下一步接收人
        auditorIds: [],
        //  提交，审批意见
        content: '',
        //  被操作表单id
        id: '',
        //  附件表
        fileList: [],
      },

    }
  },
  watch: {
    leftList(val) {
      if (val.length == 0) {
        this.$set(this, 'listOne', [])
      }
    },
    listOne(val) {
      let index = 0
      let arr2 = []
      let deep = function(arr) {
        arr.forEach((item) => {
          item.index = index
          arr2.push(JSON.parse(JSON.stringify(item)))
          index++
          if (item.hasOwnProperty('children')) {
            deep(item.children)
          }
        })
      }
      deep(val)
      console.log('change')
      this.imageProgressInfoListCopy = JSON.parse(JSON.stringify(arr2))
    }
  },
  created() {
    this.initData()
    let MothId = this.$route.query.id
    if (MothId) {
      setTimeout(() => {
        this.onChangeM({ id: '8', name: '8月' }, 7)
      }, 500);
    }
  },
  mounted() {
    this.getList()
  },
  computed: {
    tableHeight: function() {
      return (window.innerHeight - 250) + 'px';
    }
  },
  methods: {
    onChangeM(item, index) {
      this.leftListIndex = index
      this.nowLeftId = item.id
      this.getList(item)
      this.chooseMonth = item.name
    },
    approve(obj) {
      this.postDetailData = {
        show: true,
        type: 'approve',
        typeName: '审核',
        detailId: obj.id,
      }
    },
    edit(obj) {
      this.postDetailData = {
        show: true,
        type: 'edit',
        typeName: '编辑',
        detailId: obj.id,
      }
    },
    detail(obj) {
      this.postDetailData = {
        show: true,
        type: 'check',
        typeName: '查看',
        detailId: obj.id,
      }
    },
    del(obj) {
      if (obj.id === '') {
        msgUtil.error2('请先选择要删除的记录！')
        return
      }
      msgUtil.confirm('确认删除该条数据?').then(res => {
        let idlist = []
        idlist.push(obj.id)
        let param = {
          ids: idlist
        }
        this.sealDealHttp(
          `/buss/monthInvestProgress/delete`,
          ``,
          param,
          () => {
            this.$messageSuccess('删除成功!')
          }
        )
      })
    },


    initData() {

    },
    getList(val) {
      let postData = {
        yearMonthStr: this.search.year + '-' + (this.nowLeftId < 10 ? 0 + this.nowLeftId : this.nowLeftId)
      }
      this.$httpPost('buss/monthInvestProgress/paging', postData).then((res) => {
        if (res.code == 200) {
          this.listOne = res.data.content;
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取项目标段树失败")
      })


    },

    writeReport() {
      this.postDetailData = {
        show: true,
        type: 'build',
        typeName: '新增',
      }
    },

    // 点击单元格
    clickRowspan(row, key) {
      this.$set(row, `isEdit_${key}`, true)
    },



    // 显示详情弹窗 不同状态
    showDetailDialog(flag, params) {
      console.log(flag, params)
      if (!params) {
        params = {}
      }
      params.contractId = this.search.contractId
      switch (flag) {
        case 'build':
          this.postDetailData = {
            show: true,
            type: 'build',
            typeName: '新增',
            params: params,
          }
          break
        case 'update':
          this.postDetailData = {
            show: true,
            type: 'edit',
            typeName: '编辑',
            params: params,
          }
          break
        case 'show':
          this.postDetailData = {
            show: true,
            type: 'check',
            typeName: '查看',
            params: params,
            isAudit: flag,
          }
          break
        case 'audit':
          this.postDetailData = {
            show: true,
            type: 'approve',
            typeName: '审批',
            params: params,
            isAudit: flag,
          }
          break
        case 'history':
          this.postDetailData = {
            show: true,
            type: 'history',
            typeName: '历史',
            params: params,
          }
          break
        case 'approve':
          this.postDetailData = {
            show: true,
            type: 'approve',
            typeName: '审批',
            params: params,
          }
          break
      }
    },

    //下载文件
    dlFile(e) {
      this.$publicUpload.checkFile(e.id, e.fileName)
    },

    showFiles(row, title) {
      console.log(row, '=============')
      this.fileTitle = title
      this.nowFileList = row.file
      if (this.nowFileList) {
        this.showFileDialog = true
      }
    },

    //预览
    viewFile(e) {
      this.loading = true
      file.preview(e).then(response => {
        //  如果是minio地址路径，则调用kkview
        if (!response.data.startsWith("/")) {
          window.open(PREVIEW_URL + '/onlinePreview?url=' + encodeURIComponent(Base64.encode(response.data)));
        } else {
          //  如果是转换后的previewGetFile，浏览器直接打开
          window.open(response.data);
        }
        this.loading = false
      })
    },

    // 列表的操作流程
    handleClickDeal(res, entity) {
      let that = this
      let type = res.type
      let detailId = res.detailId
      let url = res.url
      let name = res.name
      let actions = res.actions
      console.log(res)
      switch (type) {
        // 修改
        case 'update':
          // 显示详情弹窗
          this.showDetailDialog(type, {
            detailId: detailId,
            actions: actions,
          })
          break
        // 查看
        case 'show':
        case 'audit':
          // 显示详情弹窗
          this.showDetailDialog(type, {
            detailId: detailId,
            actions: actions,
            params: entity,
          })
          break
        // 上报、重新上报
        case 'report':
          this.$confirm('是否上报?', '提示', {
            confirmButtonClass: 'iconfont icon-icon_ok',
            cancelButtonClass: 'iconfont icon-icon_cancel',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
          })
            .then(() => {
              this.reportData.id = detailId
              this.reportData.auditorIds = entity.reportAuditUserId.split(',')
              this.sealDealHttp(url, '', this.reportData, () => {
                this.$messageSuccess('上报成功!')
              })
            })
            .catch(() => {
              console.log('请求出现错误')
            })

          break
        // 删除
        case 'delete':
          if (detailId === '') {
            this.$messageError('请先选择要删除的记录！')
            return
          }
          this.$confirm('确定是否删除？', '提示', {
            confirmButtonClass: 'iconfont icon-icon_ok',
            cancelButtonClass: 'iconfont icon-icon_cancel',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
          })
            .then(() => {
              this.sealDealHttp(
                `/buss/monthInvestProgress/del`,
                ``,
                {
                  ids: detailId.split(','),
                },
                () => {
                  this.$messageSuccess('删除成功!')
                }
              )
            })
          /*.catch(() => {
            console.log('请求出现错误')
          })*/
          break
        // 同意
        case 'agree':
          // 显示详情弹窗
          this.showDetailDialog('approve', {
            detailId: detailId,
            actions: actions,
          })
          break
        // 驳回
        case 'reject':
          this.$prompt('请输入驳回审批意见', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          })
            .then(({ value }) => {
              this.sealDealHttp(
                url,
                `?id=${detailId}&description=${value}`,
                () => {
                  this.$messageSuccess('驳回审批成功!')
                }
              )
            })
            .catch(() => {
              console.log('请求出现错误')
            })
          break
      }
    },


    // 事件处理的api请求
    sealDealHttp(url, query, param, callback) {
      this.$httpPost(url + query, param)
        .then((res) => {
          if (res.code === 200) {
            if (callback) callback(res)
            // 重新获取数据
            setTimeout(() => {
              this.getList(true)
            }, 1000)
          } else {
            this.$messageError(res.message)
          }
        })
        .catch((res) => {
          console.log('请求出现错误', res)
          console.log(res)
        })
    },


    // 点击单元格
    cellClick(row, column, cell, event) {
      console.log(column)
      if (column.property === 'fillinDateStr') {
        this.showDialog('check', '查看', row.id)
      }
    },
  },
}
</script>

<style scoped lang="scss">
.operate_wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 40px;
  width: 100%;
  box-sizing: border-box;
  .el-button,
  .el-select,
  .el-input {
    border-radius: 4px;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    display: inline-block;
  }
  .el-date-editor--daterange {
    width: 300px;
  }
  .add {
    width: 88px;
  }
  .push {
    background-color: rgb(277, 124, 42);
    border: none;
  }
  .delete {
    margin: 0 10px;
  }
  .search {
    width: 88px;
    float: right;
    color: #fff;
    margin-left: 10px;
  }
  .el-select {
    width: 240px;
    margin-left: 10px;
  }
  .input {
    width: 240px;
    float: right;
    margin-left: 10px;
    color: #3e556e;
  }
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.flex-center {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.list_wrap {
  margin-top: 20px;
  display: flex;
  // height: calc(100vh - 215px);
  // height: 100%;
  .left-list {
    width: 80px;
    padding: 10px 5px;

    background-color: rgba(255, 255, 255, 0.4);
    border: 1px solid #e2e8ec;
    .text-class {
      cursor: pointer;
      font-size: 16px;
      color: #444;
      margin: 5px auto;
      text-align: center;
      padding: 10px 0;
    }
    .activecss-left {
      background-color: #005fff;
      color: #fff !important;
    }
  }
  .scroll-table-array {
    // height: calc(100% - 130px) !important;
    height: 100%;
    overflow-y: auto;
    width: 100%;
    .engincontentNameTitleCss {
      font-size: 14px;
      font-weight: bold;
    }
    .engincontentNameChildCss {
      font-size: 14px;
      // font-weight: bold;
      padding-left: 20px;
    }
    .iconBox {
      i {
        cursor: pointer;
      }
    }
  }
}
.edit-box {
  display: flex;
  align-items: center;
}
.btnGroupAA {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 80px;
  padding: 0px;
  .btn-item {
    flex: 1;
    cursor: pointer;
  }
  // .el-button{
  //   padding: 7px;
  // }
}
.icon-a-wenjian1 {
  font-size: 26px;
}
</style>
<style lang="scss">
.btnGroupAAUnit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  .el-input-group__append {
    padding: 0 !important;
  }
}
</style>
